<template>
  <div class="art_show_zy">
    <ul>
      <li v-for="v in arts">
        <div class="img">
          <img :src="v.src" alt="">
        </div>
        <div class="art_info">
          <p><span class="author">{{v.author}}</span></p>
          <p><i class="name">{{v.name}}</i> <i class="year">1970</i></p>
          <div class="canshu">{{v.canshu}}</div>
          <p v-html="v.vip" class="vip"></p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default{
  props: ['arts'],
  name: 'Art_show'
}
</script>
<style scoped lang="less">
  .art_show_zy{
    .img{
      text-align: center;
       img{
        width: 90%;
       }
    }
    .art_info{
      width: 90%;
      margin: auto;
      text-align: left;
      p{
        margin: 5px 0;
        .author{
          font-size: 0.9em;
          font-weight: bold;
        }
        .name,.year{
          font-size: 0.8em;
        }
      }
      div.canshu{
        font-size: 0.8em;
      }
      p.vip{
        font-weight: bold;
        font-size: 0.9em;
      }
    }
  }
</style>